<template>
	<view class="container">
		<view
			class="fd-row bgc-f9f9f9"
			:style="{
				borderRadius: `0 0 20rpx 20rpx`,
			}"
		>
			<label
				v-for="(tabBar, index) in topTabBars"
				:key="index"
				:class="[
					{ active: index === orderTabIndex },
					'f1 pt-30 pb-20 mb-30 jc-center fs-30 color-999',
				]"
				@click="switchTopTabBar(index)"
			>
				{{ tabBar }}
			</label>
		</view>

		<scroll-view
			:scroll-y="true"
			@scrolltolower="getListData"
			:refresher-enabled="true"
			@refresherrefresh="refreshData"
			:refresher-triggered="refresherTriggered"
			class="f1 oh"
		>
			<view
				v-for="(order, index) in orders.list"
				:key="index"
				:style="{
					margin: `15rpx 30rpx`,
					padding: `30rpx`,
					boxShadow: `0 0 16rpx 0 rgba(0, 0, 0, 0.15)`,
				}"
				class="section fs-28 color-666 br-10 bgc-fff"
			>
				<text
					:style="{
						backgroundColor: `rgba(${
							Number(order.type) === 2
								? '247, 148, 47'
								: Number(order.type) === 3
								? '27, 129, 242'
								: '64, 196, 132'
						}, 0.23)`,
					}"
					class="badge"
				>
					{{ order.type | serviceName }}
				</text>

				<view class="fd-row">
					<view class="lh-2 f1 oh">
						<label v-for="(option, optionKey) in order.options" :key="optionKey">
							<text>{{ option.name }}：</text>

							<view
								v-if="optionKey.includes('address')"
								@click="viewPosition(option.value, optionKey)"
								class="f1 oh fd-row ai-center"
							>
								<text class="f1 ellipsis">
									{{ option.value.name || "--" }}
								</text>
								<image
									class="width-32 height-32"
									src="/static/images/icon-position.png"
									mode="aspectFit"
								/>
							</view>
							<text v-else class="f1 ellipsis">
								{{ option.value }}
							</text>
						</label>

						<block v-if="order.showMore">
							<label>
								<text>费用：</text>
								<text class="color-f33"> ￥{{ order.amount }} </text>
							</label>
							<view>
								<text>货品图片:</text>
								<view class="f1 flex-wrap oh mr-10">
									<image
										v-for="(photo, photoIndex) in order.pictures"
										:key="photoIndex"
										:style="{
											width: `112rpx`,
											height: `112rpx`,
										}"
										:src="photo"
										@click="previewPhoto(option.value, photoIndex)"
										class="bgc-eee br-10 ml-10 mb-10"
										mode="aspectFill"
									/>
								</view>
							</view>
						</block>
					</view>
					<view class="jc-end">
						<uni-icons
							@click="showMore(index)"
							:style="{ padding: '10rpx 30rpx' }"
							:type="order.showMore ? 'arrowup' : 'arrowdown'"
						/>
					</view>
				</view>

				<view
					:style="{ borderTop: `2rpx solid #f8f8f8` }"
					class="fd-row jc-sb ai-center pt-30 mt-30"
				>
					<text>
						{{ order.status | orderStatus }}
					</text>
					<button
						:style="{ width: `186rpx`, padding: 0 }"
						class="border-none bgc-3ec483 color-fff fs-26 br-34 ml-0 mr-0"
						:plain="true"
						hover-class="tap-hover"
						:disabled="Number(order.status) > 3"
						@click="updateStatus(index)"
					>
						{{ order.status | orderOperation }}
					</button>
				</view>
			</view>
			<uni-load-more :status="loadStatus" :showIcon="!refresherTriggered" />
		</scroll-view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component, Watch } from "vue-property-decorator";
	import { Pager } from "@/common/type";
	import uniLoadMore from "@/components/uni-load-more.vue";
	import uniIcons from "@/components/uni-icons.vue";

	let requestFlag: boolean = false;
	@Component({
		components: { uniLoadMore, uniIcons },
		filters: {
			serviceName(type: number) {
				return `${{ 1: "运输", 2: "安装", 3: "搬运" }[type as 1 | 2 | 3] || ""}\n服务`;
			},
			orderStatus(status: number) {
				return { 1: "等待接单中", 2: "服务进行中", 3: "服务已完成" }[status as 1 | 2 | 3] || "";
			},
			orderOperation(status: number) {
				return { 1: "取消订单", 2: "确认完成", 3: "评价", 4: "已评价" }[
					status as 1 | 2 | 3 | 4
				];
			},
		},
	})
	export default class Order extends Vue {
		topTabBars: string[] = ["全部订单", "待接单", "进行中", "已完成"];
		orders: Pager<AnyObject> = {
			list: [],
			page: 1,
			size: 10,
		};
		loadStatus: string = "loading";
		refresherTriggered: boolean = false;

		public get orderTabIndex(): number {
			return this.$store.state.orderTabIndex;
		}

		@Watch("orderTabIndex")
		onChangeOrderTabIndex() {
			this.refresherTriggered = true;
		}

		created() {
			this.refresherTriggered = true;
		}

		refreshData() {
			this.refresherTriggered = true;
			this.orders.page = 1;
			this.orders.list = [];
			this.getListData();
		}

		public switchTopTabBar(index: number): void {
			this.$store.commit("changeOrderTabIndex", index);
		}
		public getListData(): void {
			const { $request, orders, orderTabIndex, refresherTriggered } = this;

			if (requestFlag || !orders.page) return;
			(requestFlag = true), (this.loadStatus = "loading");

			$request
				.get("/order/list", {
					eq__status: [null, 1, 2, 3][orderTabIndex],
					page: orders.page,
					size: orders.size,
				})
				.then(({ data }) => {
					orders.list.push(...data.list);
					orders.page = +data.page * orders.size < data.total ? ++data.page : 0;
					this.loadStatus = orders.page ? "more" : "noMore";
				})
				.finally(() => {
					refresherTriggered && (this.refresherTriggered = false);
					requestFlag = false;
				});
		}

		async updateStatus(index: number) {
			const { orders, $request } = this,
				{ status, id, type } = orders.list[index];

			switch (+status) {
				case 1:
				case 2:
					const { errmsg: title } = await $request.get("/order/update", {
						id,
						status,
						type,
					});
					uni.showToast({ title });
					this.orderTabIndex && this.orders.list.splice(index, 1);
					break;
				case 3:
					uni.navigateTo({
						url: `/pages/order/Evaluate?order_id=${id}&order_type=${type}`,
					});
					break;
				default:
					break;
			}
		}
		showMore(index: number) {
			this.orders.list[index].showMore = !this.orders.list[index].showMore;
		}
		viewPosition(option: AnyObject, key: string) {
			uni.openLocation(
				option as {
					latitude: number;
					longitude: number;
					[key: string]: any;
				}
			);
		}
		previewPhoto(urls: string[], current: any) {
			uni.previewImage({ urls, current });
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	label.active {
		position: relative;
		color: #1b1b1b;
		&::before {
			content: "";
			position: absolute;
			width: 50rpx;
			bottom: 0;
			height: 3px;
			border: 6rpx solid #3ec483;
			border-radius: 0 0 50% 50%/0 0 100% 100%;
			border-top: none;
		}
	}

	.section {
		position: relative;
		.badge {
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100rpx;
			height: 100rpx;
			color: #1b1b1b;
			font-size: 28rpx;
			border-radius: 0 10rpx 0 10rpx;
		}
	}
</style>